import utils from "@common/utils/utils";

const tableRender = {
    renderField(h, params) {
        return h('div', {
            class: 'cell_content',
        }, params.row[params.column.prop]);
    },
    renderTable(h, params) {
        if (params.row.render) {
            return params.row.render(h, params);
        }
        return h('div', {
            class: 'cell_content',
        }, params.row[params.column.prop]);
    },
    renderElButton(h, params, options) {
        return h('el-button', {
            style: options.style,
            props: {
                size: options.size || 'mini', // 'small',
                type: options.type,
                plain: options.plain,
                round: options.round,
                circle: options.circle,
                loading: options.loading,
                disabled: options.disabled,
                icon: options.icon,
                autofocus: options.autofocus,
                nativeType: options.nativeType || 'button',
            },
            on: {
                click(event) {
                    typeof options.click === 'function' && options.click(event, params);
                },
            }
        }, options.text);
    },
    renderElInput(h, params, options) {
        return h('el-input', {
            style: options.style,
            props: {
                value: options.value,
                type: options.type,
                maxlength: options.maxlength,
                minlength: options.minlength,
                showWordLimit: options.showWordLimit,
                placeholder: options.placeholder,
                clearable: options.clearable,
                showPassword: options.placeholder,
                disabled: options.disabled,
                size: options.size,
                prefixIcon: options.prefixIcon,
                suffixIcon: options.suffixIcon,
                rows: options.rows,
                autosize: options.autosize,
                autocomplete: options.autocomplete,
                autoComplete: options.autoComplete,
                name: options.name,
                readonly: options.readonly,
                max: options.max,
                min: options.min,
                step: options.step,
                resize: options.resize,
                autofocus: options.autofocus,
                form: options.form,
                label: options.label,
                tabindex: options.tabindex,
                validateEvent: options.validateEvent,
            },
            on: {
                blur(event) {
                    typeof options.blur === 'function' && options.blur(event, params);
                },
                focus(event) {
                    typeof options.focus === 'function' && options.focus(event, params);
                },
                change(value) {
                    typeof options.change === 'function' && options.change(value, params);
                },
                input(value) {
                    typeof options.input === 'function' && options.input(value, params);
                },
                clear() {
                    typeof options.clear === 'function' && options.clear(params);
                },
            }
        });
    },
    renderElInputNumber(h, params, options) {
        return h('el-input-number', {
            style: options.style,
            props: {
                value: options.value,
                max: options.max,
                min: options.min,
                step: options.step,
                stepStrictly: options.stepStrictly,
                precision: options.precision,
                size: options.size,
                disabled: options.disabled,
                controls: options.controls,
                controlsPosition: options.controlsPosition,
                name: options.name,
                label: options.label,
                placeholder: options.placeholder,
            },
            on: {
                blur(event) {
                    typeof options.blur === 'function' && options.blur(event, params);
                },
                focus(event) {
                    typeof options.focus === 'function' && options.focus(event, params);
                },
                change(value) {
                    typeof options.change === 'function' && options.change(value, params);
                },
            }
        });
    },
    renderElRadio(h, params, options) {
        if (!options.items) {
            options.items = [];
        }
        return h('el-radio-group', {
            style: options.style,
            props: {
                value: options.value,
                size: options.size,
                disabled: options.disabled,
                textColor: options.textColor,
                fill: options.fill,
            },
            on: {
                change(value) {
                    typeof options.change === 'function' && options.change(value, params);
                },
                input(value) {
                    typeof options.input === 'function' && options.input(value, params);
                },
            }
        }, options.items.map(item => {
            return h('el-radio', {
                style: item.style,
                props: {
                    label: item.value,
                    disabled: item.disabled,
                    border: item.border,
                    size: item.size,
                    name: item.name,
                },
            }, utils.isNotEmpty(item.text) ? item.text : item.value);
        }));
    },
    renderElCheckBox(h, params, options) {
        if (!options.items) {
            options.items = [];
        }
        return h('el-checkbox-group', {
            style: options.style,
            props: {
                value: options.value,
                size: options.size,
                disabled: options.disabled,
                min: options.min,
                max: options.max,
                textColor: options.textColor,
                fill: options.fill,
            },
            on: {
                change(value) {
                    typeof options.change === 'function' && options.change(value, params);
                },
            }
        }, options.items.map(item => {
            return h(options.button ? 'el-checkbox-button' : 'el-checkbox', {
                style: item.style,
                props: {
                    label: item.value,
                    trueLabel: item.trueLabel,
                    falseLabel: item.falseLabel,
                    disabled: item.disabled,
                    border: item.border,
                    size: item.size,
                    name: item.name,
                    checked: item.checked,
                    indeterminate: item.indeterminate,
                },
            }, utils.isNotEmpty(item.text) ? item.text : item.value);
        }));
    },
    renderElSelect(h, params, options) {
        if (!options.items) {
            options.items = [];
        }
        return h('el-select', {
            style: $.extend({}, {
                width: '100%',
            }, options.style),
            props: {
                value: options.value,
                multiple: options.multiple === undefined ? false : options.multiple,
                disabled: options.disabled,
                valueKey: options.valueKey === undefined ? 'value' : options.valueKey,
                size: options.size,
                clearable: options.clearable,
                collapseTags: options.collapseTags,
                multipleLimit: options.multipleLimit,
                name: options.name,
                autocomplete: options.autocomplete,
                autoComplete: options.autoComplete,
                placeholder: options.placeholder,
                filterable: options.filterable,
                allowCreate: options.allowCreate,
                filterMethod: options.filterMethod,
                remote: options.remote,
                remoteMethod: options.remoteMethod,
                loading: options.loading,
                loadingText: options.loadingText,
                noMatchText: options.noMatchText,
                noDataText: options.noDataText,
                popperClass: options.popperClass,
                reserveKeyword: options.reserveKeyword,
                defaultFirstOption: options.defaultFirstOption,
                popperAppendToBody: options.popperAppendToBody,
                automaticDropdown: options.automaticDropdown,
            },
            on: {
                change(value) {
                    typeof options.change === 'function' && options.change(value, params);
                },
                visibleChange(value) {
                    typeof options.visibleChange === 'function' && options.visibleChange(value, params);
                },
                removeTag(value) {
                    typeof options.removeTag === 'function' && options.removeTag(value, params);
                },
                clear() {
                    typeof options.clear === 'function' && options.clear(params);
                },
                blur(event) {
                    typeof options.blur === 'function' && options.blur(event, params);
                },
                focus(event) {
                    typeof options.focus === 'function' && options.focus(event, params);
                },
            }
        }, options.items.map(item => {
            if (options.group) {
                if (!item.children) {
                    item.children = [];
                }
                return h('el-option-group', {
                    props: {
                        label: item.label,
                    },
                }, item.children.map(child => {
                    return h('el-option', {
                        props: {
                            value: child.value,
                            label: child.label,
                            disabled: child.disabled,
                        },
                    }, child.text);
                }));
            }
            return h('el-option', {
                props: {
                    value: item.value,
                    label: item.label,
                    disabled: item.disabled,
                },
            }, item.text);
        }));
    },
    renderElSwitch(h, params, options) {
        return h('el-switch', {
            style: options.style,
            props: {
                value: options.value,
                disabled: options.disabled,
                width: options.width,
                activeIconClass: options.activeIconClass,
                inactiveIconClass: options.inactiveIconClass,
                activeText: options.activeText,
                inactiveText: options.inactiveText,
                activeValue: options.activeValue,
                inactiveValue: options.inactiveValue,
                activeColor: options.activeColor,
                inactiveColor: options.inactiveColor,
                name: options.name,
                validateEvent: options.validateEvent,
            },
            on: {
                change(value) {
                    typeof options.change === 'function' && options.change(value, params);
                },
            }
        });
    },
    renderElSlider(h, params, options) {
        return h('el-slider', {
            style: options.style,
            props: {
                value: options.value,
                min: options.min,
                max: options.max,
                disabled: options.disabled,
                step: options.step,
                showInput: options.showInput,
                showInputControls: options.showInputControls,
                inputSize: options.inputSize,
                showStops: options.showStops,
                showTooltip: options.showTooltip,
                formatTooltip: options.formatTooltip,
                range: options.range,
                vertical: options.vertical,
                height: options.height,
                label: options.label,
                debounce: options.debounce,
                tooltipClass: options.tooltipClass,
                marks: options.marks,
            },
            on: {
                change(value) {
                    typeof options.change === 'function' && options.change(value, params);
                },
                input(value) {
                    typeof options.input === 'function' && options.input(value, params);
                },
            }
        });
    },
    renderElTimeSelect(h, params, options) {
        return h('el-time-select', {
            style: options.style,
            props: {
                value: options.value,
                readonly: options.readonly,
                disabled: options.disabled,
                editable: options.editable,
                clearable: options.clearable,
                size: options.size,
                placeholder: options.placeholder,
                startPlaceholder: options.startPlaceholder,
                endPlaceholder: options.endPlaceholder,
                isRange: options.isRange,
                arrowControl: options.arrowControl,
                align: options.align,
                popperClass: options.popperClass,
                pickerOptions: options.pickerOptions,
                rangeSeparator: options.rangeSeparator,
                valueFormat: options.valueFormat,
                defaultValue: options.defaultValue,
                name: options.name,
                prefixIcon: options.prefixIcon,
                clearIcon: options.clearIcon,
            },
            on: {
                change(value) {
                    typeof options.change === 'function' && options.change(value, params);
                },
                blur(event) {
                    typeof options.blur === 'function' && options.blur(event, params);
                },
                focus(event) {
                    typeof options.focus === 'function' && options.focus(event, params);
                },
            }
        });
    },
    renderElTimePicker(h, params, options) {
        return h('el-time-picker ', {
            style: options.style,
            props: {
                value: options.value,
                readonly: options.readonly,
                disabled: options.disabled,
                editable: options.editable,
                clearable: options.clearable,
                size: options.size,
                placeholder: options.placeholder,
                startPlaceholder: options.startPlaceholder,
                endPlaceholder: options.endPlaceholder,
                isRange: options.isRange,
                arrowControl: options.arrowControl,
                align: options.align,
                popperClass: options.popperClass,
                pickerOptions: options.pickerOptions,
                rangeSeparator: options.rangeSeparator,
                valueFormat: options.valueFormat,
                defaultValue: options.defaultValue,
                name: options.name,
                prefixIcon: options.prefixIcon,
                clearIcon: options.clearIcon,
            },
            on: {
                change(value) {
                    typeof options.change === 'function' && options.change(value, params);
                },
                blur(event) {
                    typeof options.blur === 'function' && options.blur(event, params);
                },
                focus(event) {
                    typeof options.focus === 'function' && options.focus(event, params);
                },
            }
        });
    },
    renderElDatePicker(h, params, options) {
        return h('el-date-picker', {
            style: options.style,
            props: {
                value: options.value,
                readonly: options.readonly,
                disabled: options.disabled,
                editable: options.editable,
                clearable: options.clearable,
                size: options.size,
                placeholder: options.placeholder,
                startPlaceholder: options.startPlaceholder,
                endPlaceholder: options.endPlaceholder,
                type: options.type,
                format: options.format,
                align: options.align,
                popperClass: options.popperClass,
                pickerOptions: options.pickerOptions,
                rangeSeparator: options.rangeSeparator,
                defaultValue: options.defaultValue,
                defaultTime: options.defaultTime,
                valueFormat: options.valueFormat,
                name: options.name,
                unlinkPanels: options.unlinkPanels,
                prefixIcon: options.prefixIcon,
                clearIcon: options.clearIcon,
                validateEvent: options.validateEvent,
            },
            on: {
                change(value) {
                    typeof options.change === 'function' && options.change(value, params);
                },
                blur(event) {
                    typeof options.blur === 'function' && options.blur(event, params);
                },
                focus(event) {
                    typeof options.focus === 'function' && options.focus(event, params);
                },
            }
        });
    },
    renderElUpload(h, params, options) {
        if (!options.uploadContent) {
            options.uploadContent = (h, params) => {
                return tableRender.renderElButton(h, params, {
                    text: '上传',
                });
            };
        }
        return h('el-upload', {
            style: options.style,
            props: {
                action: options.action,
                headers: options.headers,
                multiple: options.multiple,
                data: options.data,
                name: options.name,
                withCredentials: options.withCredentials,
                showFileList: options.showFileList,
                drag: options.drag,
                accept: options.accept,
                onPreview: options.onPreview,
                onRemove: options.onRemove,
                onSuccess: options.onSuccess,
                onError: options.onError,
                onProgress: options.onProgress,
                onChange: options.onChange,
                beforeUpload: options.beforeUpload,
                beforeRemove: options.beforeRemove,
                listType: options.listType,
                autoUpload: options.autoUpload,
                fileList: options.fileList,
                httpRequest: options.httpRequest,
                disabled: options.disabled,
                limit: options.limit,
                onExceed: options.onExceed,
            },
            on: {
                clearFiles() {
                    typeof options.clearFiles === 'function' && options.clearFiles(params);
                },
                abort(file) {
                    typeof options.abort === 'function' && options.abort(file, params);
                },
                submit() {
                    typeof options.submit === 'function' && options.submit(params);
                },
            }
        }, [options.uploadContent(h, params)]);
    },
    renderElTooltip(h, params, options, childs = []) {
        return h('el-tooltip', {
            style: options.style,
            props: {
                effect: options.effect,
                content: options.content,
                placement: options.placement,
                value: options.value,
                disabled: options.disabled,
                offset: options.offset,
                transition: options.transition,
                visibleArrow: options.visibleArrow,
                popperOptions: options.popperOptions,
                openDelay: options.openDelay,
                manual: options.manual,
                popperClass: options.popperClass,
                enterable: options.enterable,
                hideAfter: options.hideAfter,
                tabindex: options.tabindex,
            },
        }, childs);
    },
    renderElLink(h, params, options) {
        return h('el-link', {
            style: options.style,
            props: {
                type: options.type || 'default',
                underline: options.underline === undefined ? true : options.underline,
                disabled: options.disabled === undefined ? false : options.underline,
                href: options.href,
                icon: options.icon,
            },
            on: {
                click(event) {
                    typeof options.click === 'function' && options.click(event, params);
                },
            }
        }, options.text);
    },
}
export default tableRender;
